<template>
  	<div class="div">
    	<div class="top">
      		<PageTitle title="普通用户订单列表"></PageTitle>
      		<el-button type="primary" @click="download">订单导出</el-button>
    	</div>

    	<el-row :gutter="10">
      		<el-col :span="12">
        		<dl class="select-bar">
          			<dt>筛选:</dt>
          			<dd :class="{ current: status == '' }" @click="handleClick('')"> 全部</dd>
          			<dd :class="{ current: status == '1' }" @click="handleClick('1')">待付款</dd>
          			<dd :class="{ current: status == '2' }" @click="handleClick('2')">待发货</dd>
          			<dd :class="{ current: status == '6' }" @click="handleClick('6')">待收货</dd>
          			<dd :class="{ current: status == '4' }" @click="handleClick('4')">已完成</dd>
          			<dd :class="{ current: status == '5' }" @click="handleClick('5')">退货申请中</dd>
        		</dl>
      		</el-col>
      		<el-col :span="6">
        		<el-input :placeholder="'输入订单号搜索'" v-model="search" @keypress.enter.native="handleSearch">
          			<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        		</el-input>
      		</el-col>
      		<el-col :span="6">
        		<DatePicker @dateChange="dateChange" />
      		</el-col>
    	</el-row>
    	<el-table stripe :data="tableData">
      		<el-table-column prop="order_code" label="订单号"> </el-table-column>
      		<el-table-column label="商品图片">
        		<template slot-scope="scope">
          			<img :src="scope.row.guageList[0].url" @click="handlePictureCardPreview(scope.row.guageList[0].url)" class="list-img"/>
        		</template>
      		</el-table-column>
      		<el-table-column label="商品名称">
        		<template slot-scope="scope">
          			{{ scope.row.guageList[0].name }} 等
          			{{ scope.row.guageList.length }} 种商品
        		</template>
      		</el-table-column>
      		<el-table-column label="总价格">
        		<template slot-scope="scope"> ￥{{ scope.row.subtotal }} </template>
      		</el-table-column>
      		<el-table-column label="状态">
        		<template slot-scope="scope">
					<template v-if="scope.row.payment_status == 1">
						<span class="color-info">待付款</span>
					</template>
					<template v-else-if="scope.row.shipping_status == 2">
						<span class="color-danger">待发货</span>
					</template>
					<template v-else-if="scope.row.shipping_status == 4">
						<span class="color-success">已完成</span>
					</template>
					<template v-else-if="scope.row.shipping_status == 5">
						<span class="color-theme">退货申请中</span>
					</template>
					<template v-else-if="scope.row.shipping_status == 6">
						<span class="color-danger">待收货</span>
					</template>
        		</template>
      		</el-table-column>
      		<el-table-column label="操作">
        		<template slot-scope="scope">
					<router-link
						:to="'/orderList/orderDetail/' + scope.row.order_code"
						class="el-button el-button--text"
						>查看</router-link
					>
        		</template>
      		</el-table-column>
    	</el-table>
    	<div class="pagination-wrapper">
      		<el-pagination 
			  	layout="prev, pager, next" 
				@current-change="pageChange" 
				:page-size="pageSize" 
				:total="totalCount"
				:current-page="pageNum"
      		>
      		</el-pagination>
    	</div>
    	<el-dialog :visible.sync="dialogVisible">
      		<img width="100%" :src="dialogImageUrl" />
    	</el-dialog>
  	</div>
</template>

<script>
	import PageTitle from "@/components/pageTitle/PageTitle.vue";
	import DatePicker from "@/components/datePicker/DatePicker.vue";
	export default {
  		name: "OrderList",
		components: {
			PageTitle,
			DatePicker,
		},
		activated() {
			this._getList();
		},
  		data() {
			return {
				dialogImageUrl: "",
				dialogVisible: false,
				tableData: [],
				status: "",
				pageNum: 1,
				pageSize: 10,
				totalCount: 0,
				date: [],
				search: "",
			};
  		},
  		computed: {
    		statusParams() {
      			let obj = {};
      			switch (this.status) {
					case "":
					break;
					case "1":
						obj.payment_status = 1;
					break;
					case "2":
						obj.payment_status = 2;
						obj.shipping_status = 2;
					break;
        			case "4":
          				obj.shipping_status = 4;
          			break;
        			case "5":
          				obj.shipping_status = 5;
          			break;
        			case "6":
          				obj.shipping_status = 6;
          			break;
      			}
      			return obj;
    		},
  		},
  		methods: {
	  		//导出订单
	  		download(){
				window.location.href=`http://admin.youjingxi.net.cn/v1/goods/user?token=${localStorage.getItem('token')}&start_time=${this.date[0]}&size=10&end_time=${this.date[1]}`
	  		},
    		async _getList() {
      			let {data: { code, data },} = await this.$axios({
        			url: this.$api + "/v1/merchant/order",
        			method: "GET",
        			params: {
						size: this.pageSize,
						current: this.pageNum,
						...this.statusParams,
						starttime: this.date[0],
						endtime: this.date[1],
						order_code: this.search,
					},
      			});
      			if (code === 0) {
        			if (data.items) {
						this.tableData = data.subtotal.map((item, index) => {
							item.guageList = data.items[index];
							return item;
						});
          				this.totalCount = data.page.totalCount;
					} else {
						this.tableData = [];
					}
      			}
    		},
			handleClick(s) {
				this.status = s;
				this.pageNum = 1;
				this.$nextTick(() => {
					this._getList();
				});
			},
			handleSearch() {
				this.pageNum = 1;
				this._getList();
			},
			pageChange(pageNum) {
				this.pageNum = pageNum
				this._getList();
			},
    		dateChange(date) {
      			this.date = date;
      			this.pageNum = 1;
      			this._getList();
    		},
			handlePictureCardPreview(src) {
				this.dialogImageUrl = src;
				this.dialogVisible = true;
			},
  		},
	};
</script>

<style lang="scss" scoped>
@import "@/assets/css/select-bar.scss";
.list-img {
  width: 80%;
  height: 60px;
  cursor: pointer;
}
.el-button--text {
  text-decoration: none;
}
.top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .title {
    width: calc(100% - 150px);
  }
  button {
    width: 100px;
    line-height: 40px;
    height: 40px;
    padding: 0;
  }
}
</style>
